<template>
	<el-dialog title="监控视频" :visible.sync="dialogVisible" :before-close="handleClose" :close-on-click-modal='false'
	 :append-to-body='true' custom-class="videoDialog">
		<video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"
		 @ready="playerReadied" @timeupdate="onPlayerTimeupdate($event)"></video-player>
	</el-dialog>
</template>

<script>
	import {
		videoPlayer
	} from 'vue-video-player'
	import '../../../node_modules/video.js/dist/video-js.css'
	import '../../../node_modules/vue-video-player/src/custom-theme.css'
	// import 'videojs-flash'
	export default {
		name: 'video',
		components: {
			videoPlayer
		},
		props: {
			dialogVisible: {
				type: Boolean,
				default () {
					return false
				}
			},
			sources: {
				type: String,
				default () {
					return 'http://139.224.128.227:8090/resource/mp4Course/9001/08db1bfc0d804d238aeff13624b2f4da/593138AB7CC4489DBDFF00D6E25415C7.mp4'
				}
			}
		},
		mounted() {
			this.playerOptions.sources = [{
						type: 'application/x-mpegURL',
						src: this.surl
					}]
		},
		data() {
			return {
				playerOptions: {
					events:[],
					playbackRates: [1], //播放速度
					muted: true, // 默认情况下将会消除任何音频。
					loop: false, // 导致视频一结束就重新开始。
					preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
					language: 'zh-CN',
					aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
					fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
					sources: '',
					// live: true,
					hls: true,
					autoplay: false,
					// techOrder: ['flash'],
					// poster: "../../static/images/test.jpg", //你的封面地址
					notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
					controlBar: {
						timeDivider: false,
						durationDisplay: false,
						remainingTimeDisplay: false,
						currentTimeDisplay: false, // 当前时间
						volumeControl: true, // 声音控制键
						playToggle: true, // 暂停和播放键
						progressControl: false, // 进度条
						fullscreenToggle: true //全屏按钮
					}
				},
				lastTime: ''
			}
		},
		computed:{
			surl(){
				if(localStorage.surl){
					return JSON.parse(localStorage.surl).url
				}else{
					return ''
				}
			}
		},
		methods: {
			handleClose() {
				this.$emit('handleClose')
			},
			playerReadied(player) {
				console.log('example player 1 readied', player)
				// player.currentTime(100)
				this.lastTime = player.currentTime()
			},
			onPlayerTimeupdate(player) {
				// let current = player.currentTime();
				// if (current < this.last) {
				// 	return
				// } else {
				// 	if (current - this.last > 2) {
				// 		player.currentTime( this.last);
				// 		return;
				// 	} else {
				// 		this.last = current;
				// 	}
				// }
				// console.log('player Timeupdate!', player.currentTime())
			},
		}
	}
</script>

<style>
</style>
